<template>
   <div class="login">
      <div @mouseenter="showLoginInput" @mouseleave="showLoginInput" class="ganying">
         <div class="L_border">
            <div class="login-content ">
               <div class="idcard">Id Card</div>
               <div v-show="!show_login_input" class="login-header fade-in-out">
                  <img src="../assets/img/logo.png" alt="Logo" class="logo"/>
               </div>
               <div v-show="show_login_input" class="login-form fade-in-out">
                  <div>
                     <div class="text">用户名:</div>
                     <input class="username" @focus="handleFocus" @blur="handleBlur" v-model="username"/>
                  </div>

                  <div>
                     <div class="text">密码:</div>
                     <input class="password" @focus="handleFocus" @blur="handleBlur" v-model="password"/>
                  </div>

                  <div>
                     <div class="text">验证码:</div>
                     <input id="captcha" @focus="handleFocus" @blur="handleBlur" v-model="captcha"/>
                     <!--验证码-->
                     <div style="user-select:none">
                        <canvas
                            ref="captchaCanvas"
                            class="captcha"
                            @click="generateCaptcha"
                        ></canvas>
                        <span class="shuxin text">点击刷新</span>
                     </div>
                  </div>

                  <div class="start">
                     <div class="login_b">
                        <div class="start_t" @click="start">start</div>
                     </div>
                  </div>
                  <div class="text" style="cursor: pointer">
                     没有账号？
                  </div>
                  <div class="text" style="cursor: pointer;margin-top: 10px">
                     忘记密码?
                  </div>
                  <!--测试AI-->
                  <!--<ApiStream></ApiStream>-->
               </div>
            </div>
         </div>
      </div>
<!--      <div class="robot">-->
<!--                  <img src="../assets/img/background1.png" alt="机器人 GIF"/>-->
<!--      </div>-->
   </div>
</template>


<script setup>
import {computed, onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import axios from 'axios';

const router = useRouter();
const captchaCanvas = ref(null);
const ctx = ref(null);
let captchaText = ref('');
let username = ref('');
let password = ref('');
let captcha = ref('');
let show_login_input = ref(false);//是否显示输入框
let show_login_input1 = ref(false);//鼠标是否进入感应区
const isFocused = ref(false);//input是否获取焦点
function start() {
   //router.push({path: "/home"})
   // 在这里添加登录逻辑
   console.log('登录');
   console.log(username.value);
   console.log(password.value);
   // 检查用户名和密码是否为空
   if (username.value.trim() === '' || password.value.trim() === '') {
      alert('用户名或密码不能为空');
      return;
   }
   // 检查验证码是否正确
   captcha.value = captcha.value.toUpperCase();
   captchaText.value = captchaText.value.toUpperCase();
   console.log(captcha.value);//输入的验证码
   console.log(captchaText.value);//验证码

   if (captcha.value !== captchaText.value) {
      drawCaptcha();
      captcha.value = "";
      alert('验证码错误');
      return;
   }
   captcha.value = "";
   axios.get(
       'http://localhost/api/getAllConsultants',
       {
            params: {
             username: username.value,
             password: password.value
          }
       }
   ).then((response) => {
      console.log(response.data);
     localStorage.setItem('key', JSON.stringify(response.data));
     sessionStorage.setItem("token",112221);//(因深奥写的响应占了uuid返回值，所以在这里写个固定uuid,来通过后台uuid验证)
     let value='';
     if(localStorage.getItem('key')){
       value=JSON.parse(localStorage.getItem('key'));
     }

     console.log(value)
      if (response.data.code === 200) {
         console.log("登录成功");
         router.push({path: "/home"})
      } else {
         console.log("登录失败");
         alert('登录失败:' + response.data.msg);
      }
   }).catch(()=>{
      console.log("登录失败");

   })

}

show_login_input = computed(function () {
   if (isFocused.value || show_login_input1.value) {
      console.log("真", isFocused.value, show_login_input1.value)
      return true;
   } else {
      console.log("假", isFocused.value, show_login_input1.value)
      return false
   }

})

function handleFocus() {
   isFocused.value = true;
}

function handleBlur() {
   isFocused.value = false;
}

// 生成随机颜色
function randomColor(min, max) {
   return `rgb(${Math.floor(Math.random() * (max - min + 1)) + min}, ${Math.floor(Math.random() * (max - min + 1)) + min}, ${Math.floor(Math.random() * (max - min + 1)) + min})`;
}

// 生成随机字符串
function randomString(length) {
   const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
   let result = '';
   for (let i = 0; i < length; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length));
   }
   return result;
}

// 绘制验证码
function drawCaptcha() {
   ctx.value.fillStyle = randomColor(180, 240);
   ctx.value.fillRect(0, 0, 300, 150);

   // 绘制干扰线
   for (let i = 0; i < 5; i++) {
      ctx.value.strokeStyle = randomColor(40, 180);
      ctx.value.beginPath();
      ctx.value.moveTo(Math.random() * 130, Math.random() * 50);
      ctx.value.lineTo(Math.random() * 130, Math.random() * 50);
      ctx.value.stroke();
   }

   // 绘制干扰点
   for (let i = 0; i < 80; i++) {
      ctx.value.fillStyle = randomColor(0, 255);
      ctx.value.beginPath();
      ctx.value.arc(Math.random() * 130, Math.random() * 50, 1, 0, 2 * Math.PI);
      ctx.value.fill();
   }

   captchaText.value = randomString(4);
   ctx.value.font = `${Math.random() * 5 + 4}em SimHei`;
   ctx.value.fillStyle = randomColor(50, 160);
   ctx.value.textBaseline = 'middle';

   // 绘制验证码文本
   for (let i = 0; i < captchaText.value.length; i++) {
      const char = captchaText.value[i];
      // const x = (130 / captchaText.value.length) * i + (130 / captchaText.value.length) / 2;
      // 增加一个间距因子来控制字符间距
      const spacingFactor = 1.9; // 你可以根据需要调整这个值
      const x = (130 / captchaText.value.length) * i * spacingFactor + (130 / captchaText.value.length) / 2;
      const y = 90;
      ctx.value.save(); // 保存当前状态
      ctx.value.translate(x, y);
      ctx.value.rotate((Math.random() - 0.5) * Math.PI / 6);
      ctx.value.fillText(char, 0, 0);
      ctx.value.restore(); // 恢复之前保存的状态
   }
}

// 组件挂载后生成验证码
onMounted(() => {
   if (captchaCanvas && captchaCanvas.value) {
      ctx.value = captchaCanvas.value.getContext('2d');
      drawCaptcha();
   }
});

// 重新生成验证码
function generateCaptcha() {
   ctx.value.clearRect(0, 0, 130, 50);
   drawCaptcha();
}

function handleLoginSubmit() {

}

function showLoginInput() {
   setTimeout(function () {
      show_login_input1.value = !show_login_input1.value;
   }, 300);

}


</script>


<style scoped>
.login {
   margin: 0;
   padding: 0;
   width: 100vw;
   height: 100vh;
   position: relative;
   background-image: url("../assets/img/background5.png");
   background-size: cover;
   background-position: bottom;
   background-repeat: no-repeat;
   overflow: hidden; /* 隐藏超出部分 */
}

.login::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0); /* 半透明黑色 */
   z-index: 1;
}

/*-----------------------------------------------------------*/

.ganying {
   width: 50vw;
   height: 100%;
   position: absolute;
   top: 0;
   left: 25%;
   z-index: 2;
}

/*-----------------------------------------------------------*/
.robot {
   position: absolute;
   top: 15%;
   right: 0;
   z-index: 1;
   width: 40%;
   height: 50%;
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s ease-in-out;
}

.robot:hover {
   transform: scale(1.1); /* 鼠标悬停时放大 */
}

.robot img {
   width: 100%;
   height: 100%
}

/*-------------------------------------------------------*/

.text {
   display: inline-block;
   /*text-shadow: 0 0 10px #00c2cb50, 0 0 20px #00c2cb50;*/
}

/*倒影效果*/
.login-content::before {
   content: "";
   position: absolute;
   top: 84%;
   left: 0;
   height: 100%;
   width: 110%;
   /*映射效果*/
   border-top: 40px #00c2cb solid;
   background: rgba(2, 2, 2, 0.6);
   box-shadow: 0 0 10px 5px #00c2cb;
   transform: perspective(50px) /*3D空间中观察者到元素的距离,上面的宽度*/ rotateX(10deg) /*在X轴（水平轴）上旋转,垂直角度*/ scale(1.2, 0.4); /*长,宽 在不同的轴上缩放元素。这里在X轴上保持原始大小（1），而在Y轴上缩小到原始大小的30%（0.3）*/
   filter: blur(30px); /*模数程度 filter属性用于对元素应用图形效果，如模糊、亮度、对比度等*/
   opacity: 0.3; /*设置元素的透明度*/
}

.L_border {
   height: 600px;
   width: 350px;

}

.fade-enter-active, .fade-leave-active {
   transition: opacity 0.5s ease-in-out;
}

.fade-enter, .fade-leave-to {
   opacity: 0;
}

.login-content {
   transform: perspective(600px);
   color: #00c2cb50;
   background-color: rgba(2, 2, 2, 0.6);
   /*border: 1px solid rgba(0, 86, 179, 0.9); */
   box-shadow: 0 0 10px 5px #00c2cb; /* 添加阴影效果 */
   text-shadow: 0 0 10px #00c2cb50, 0 0 20px #00c2cb50;
   border-radius: 10px;
   height: 600px;
   width: 350px;
   position: absolute;
   top: 10%;
   left: 35%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px; /* 设置元素之间的间距 */
   transition: opacity 0.5s ease, color 1.8s ease;


}

.idcard {
   position: absolute;
   top: 0;
   left: 0;
   width: 100px;
   height: 40px;
   color: #fff;
   text-shadow: 0 0 10px #00c2cb, 0 0 20px #00c2cb;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
}

/*登录窗口*/
.login-content:hover {
   color: #fff;
   text-shadow: 0 0 10px #00c2cb, 0 0 20px #00c2cb;
}

/**/
.start_t {
   color: #00c2cb;
   opacity: 0;
   user-select: none;
   transition: opacity 0.5s ease, color 1s ease;
}

.start:hover {
   .start_t {
      color: #fff;
      opacity: 1;
   }
}

/*登录按钮*/
.login_b {
   text-align: center;
   cursor: pointer;
   margin: 0 auto;
   width: 100px;
   height: 100px;
   line-height: 100px;
   border-radius: 50%;
   background-image: url("../assets/img/loginBtn.gif");
   background-size: cover; /* 背景图片覆盖整个容器 */
   background-position: center; /* 背景图片居中显示 */
}


.login-header {
   width: 200px;
   height: 200px;
   line-height: 200px;
   background-image: url("../assets/img/loginBtn.gif");
   background-size: cover; /* 背景图片覆盖整个容器 */
   background-position: center; /* 背景图片居中显示 */
   -webkit-box-reflect: below 430px url(https://s1.aigei.com);
}

.logo {
   position: absolute;
   top: 10%;
   left: 35%;
   width: 100px;
   height: 100px;
   border-radius: 50%;

   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.login-form {
   /*镜像效果*/
   -webkit-box-reflect: below 220px url(https://kimi.moonshot.cn/);
}

.login-form div {
   display: flex;
   flex-direction: column;
   margin-bottom: 10px; /* 设置表单项之间的间距 */

}


input {
   padding: 8px;
   margin-top: 5px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background-color: transparent; /* 取消背景色 */
   transition: opacity 0.5s ease, color 1s ease;
}

/* 设置占位符文本的样式 */
input::placeholder {
   color: #fff;
   font-size: 14px; /* 字体大小 */

}

/* 设置输入框获得焦点时的文本样式 */
input:focus {
   color: #fff;
   text-shadow: 0 0 10px #00c2cb, 0 0 20px #00c2cb;

}


button {
   padding: 10px 20px;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
}

button:hover {
   background-color: #0056b3;
}

.captcha {
   cursor: pointer;
   width: 130px;
   height: 30px;
   margin-top: 10px;
   background-color: #ef0000;
}

.shuxin {
   position: relative;
   top: -27px;
   left: 140px;
}


a {
   margin-top: 10px;
   color: #007bff;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}


</style>